<template>
    <div class="upload_state_cp" v-show="show">
        <div class="operation">
            <i 
                :class="minimize?'el-icon-arrow-up':'el-icon-arrow-down'" 
                @click="minimize = !minimize">
            </i>
            <i class="el-icon-close" @click="on_close"></i>
        </div>
        <template v-if="minimize">
            <div class="minimize_content">
                <i :class="upload_state==0?'el-icon-refresh':'el-icon-loading'"></i>
                {{upload_state==0?'任务已结束!':'正在执行!'}}
            </div>
        </template>
        <el-collapse-transition>
            <div class="container" v-show="!minimize">
                <div class="top">
                    <i :class="upload_state==0?'el-icon-refresh':'el-icon-loading'"></i>
                    {{upload_state==0?'任务已结束!':'正在执行!'}}
                </div>
                <div class="my_divider">
                    <el-divider></el-divider>
                </div>
                <div class="content">
                    <div class="item" v-for="(item,index) in task_list" :key="index">
                        <div class="left">
                            <i :class="[
                                    get_file_type_icon(item.file.name),
                                    'icon',
                                ]">
                            </i>
                        </div>
                        <div class="centre">
                            <div class="top">
                                {{item.file.name}}
                            </div>
                            <div class="bottom">
                                {{item.file.size ? (item.file.size/1024).toFixed(2)+'kb' : ''}}
                                <i class="el-icon-download"  v-if="item.operate=='下载'"></i>
                                <i class="el-icon-share"  v-if="item.operate=='分享'"></i>
                                <i class="el-icon-upload2"  v-if="item.operate=='上传'"></i>
                                {{item.operate}}
                                <el-tag size="mini" type="success" v-if="item.state=='success'">成功</el-tag>
                                <el-tag size="mini" type="danger" v-if="item.state=='fail'">失败</el-tag>
                            </div>
                        </div>
                        <div class="right">
                            <el-tooltip effect="dark" :content="item.msg" placement="top-end">
                                <i class="el-icon-loading" v-if="item.state=='await'"></i>
                                <i class="el-icon-loading" v-if="item.state=='loading'"></i>
                                <i class="el-icon-success" v-if="item.state=='success'"></i>
                                <i class="el-icon-warning" v-if="item.state=='fail'"></i>
                            </el-tooltip>
                        </div>  
                    </div>
                </div>
            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
import {get_fileicon_by_type} from '@/common/my_tools'
export default { //文件上传状态组件
    name: 'Upload_state_cp',
    data(){
        return{
            show:false, //只由组件内部控制是否显示
            minimize:false, //控制组件是否最小化
            task_list:[], //任务文件的列表
            upload_state:0, //正在上传的文件数（以此来判断状态）
        };
    },
    created(){
    },
    watch:{
        '$store.state.upload_file'(new_data){ //监听全局添加上传的文件
            this.show = true;
            new_data.state = 'await';
            new_data.operate = '上传';
            this.task_list.push(new_data);
        },
        '$store.state.download_file'(new_data){ //监听全局添加下载的文件
            this.show = true;
            new_data.operate = '下载';
            this.task_list.push(new_data);
        },
        '$store.state.share_file'(new_data){ //监听全局添加分享的文件
            this.show = true;
            new_data.operate = '分享';
            this.task_list.push(new_data);
        },
        '$store.state.delete_file'(new_data){ //监听全局添加删除的文件
            this.show = true;
            new_data.operate = '删除';
            this.task_list.push(new_data);
        },
        '$store.state.accept_share_file'(new_data){ //监听全局添加接受分享的文件
            this.show = true;
            new_data.operate = '接受分享';
            this.task_list.push(new_data);
        },
        '$store.state.unshare_file'(new_data){ //监听全局添加拒绝接受的文件
            this.show = true;
            new_data.operate = '拒绝接受';
            this.task_list.push(new_data);
        },
        task_list:{ //当数组发生变化时，执行任务
            handler(){
                this.task_list.forEach((item,index)=>{
                    if(item.operate == '上传'){ //这是上传的任务
                        if(item.state=='await'){
                            item.state = 'loading'; //防止多次执行上传
                            this.upload_state++;
                            console.log(item.file);
                            this.$axios.json_post('file/uploadke',{
                                fileName:item.file.path,
                                fileLevel:item.fileLevel,
                                fileTag:item.fileTag,
                            }).then(({msg})=>{
                                item.state = 'success';
                                item.msg = msg;
                                this.upload_state--; //任务列表减一
                                this.$set(this.task_list,index,item); //更新列表
                            }).catch((msg)=>{
                                item.msg = msg;
                                item.state = 'fail';
                                this.upload_state--; //任务列表减一
                                this.$set(this.task_list,index,item); //更新列表
                            });
                        }
                    }else if(item.operate == '下载'){
                        return;
                    }else if(item.operate == '分享'){
                        return;
                    }else if(item.operate == '删除'){
                        return;
                    }else if(item.operate == '接受分享'){
                        return;
                    }else if(item.operate == '拒绝接受'){
                        return;
                    }
                });         
            },
            deep:true,
        },
        upload_state(){ //当upload_state=0时表示上传完毕
            if(this.upload_state==0){
                this.$store.state.update_data = !this.$store.state.update_data;
            }
        },
    },
    methods:{
        on_close(){ //关闭上传文件状态栏
            this.task_list = [];
            this.show = false;
            this.$store.commit('set_loading',{ //同时关闭刷新组件
                state:false,
            });
        },
        get_file_type_icon(name){ //根据文件名获取图标
            if(name){
                let names = name.split('.')
                if(names.length<=2){
                    return get_fileicon_by_type(names.pop());
                }else{
                    names.pop()
                    return get_fileicon_by_type(names.pop());
                }
            }
        },
    },
}
</script>

<style scoped lang='scss'>
.upload_state_cp{
    width:300px;
    height: fit-content;
    background-color: white;
    border: 1px solid #c8ccd3;
    border-radius: 2px;
    box-shadow: 0 1px 4px 0 rgba(15,32,65,.2);
    position:fixed;
    bottom: 35px;
    right: 30px;
    z-index: 999;
    transition: all 0.2s;
    .my_divider{
        padding: 0;
        box-sizing: border-box;
        .el-divider--horizontal{
            margin:0;
        }
    }
    >.operation{
        width: 100%;
        padding: 10px 10px 0 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        i{
            font-size: 20px;
            margin-left: 10px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            &:hover{
                color: #ff2e63;
            }
        }
    }
    >.minimize_content{
        width: fit-content;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 15px;
        line-height: 100%;
        color: #2b2e4a;
        transform: translateY(-20px);
        i{
            font-size: 20px;
            margin-right: 20px;
            color: #4c94f0;
        }
    }
    >.container{
        width:100%;
        height: fit-content;
        >.top{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 25px;
            line-height: 100%;
            margin-bottom: 20px;
            color: #2b2e4a;
            i{
                font-size: 40px;
                margin-right: 20px;
                color: #4c94f0;
            }
        }
        >.content{
            width: 100%;
            max-height: 300px;
            min-height: 100px;
            overflow-y: auto;
            >.item{
                display: grid;
                grid-template-columns: 40px auto 35px;
                grid-template-rows: 40px;
                grid-gap: 10px;
                padding: 10px 10px;
                box-sizing: border-box;
                border-bottom: 1px solid #e8eaeb;
                >.left{
                    i{
                        width: 40px;
                        height: 40px;
                    }
                }
                >.centre{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    word-break: break-all;
                    text-align: left;
                    >.top{
                        font-size: 14px;
                        line-height: 100%;
                        margin-bottom: 7px;
                    }
                    >.bottom{
                        font-size: 12px;
                        line-height: 100%;
                        color: #777;
                    }
                }
                >.right{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    width: 35px;
                    height: 40px;
                    i{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }
}
</style>
